<template>
    <div class="left_box_1">
        <div class="top_box">
            年龄分布情况统计
        </div>

        <div class="right_box">
            <div class="right_box_tab">
                <div @click="swithTabs(item,index)" v-for="(item,index) in indexs" :key="index" :class="[index == tabsInitNum ? 'active' : 'inactive']"> {{item.name}}</div>
            </div>

            <div class="echarts" style="width: 100%; height: 100%;" ref="chart"></div>
        </div>

    </div>

</template>

<script>
let Echarts = require('echarts/lib/echarts'); //基础实例 注意不要使用import
require('echarts/lib/chart/pie'); //按需引入 bar = 柱状图
export default {
    name: "index",
    data() {
        return {
            tabsInitNum: '1', // tabs初始化 - 按日
            indexs: [
                {
                    name: '正序',
                    type: 'asc'
                },
                {
                    name: '倒序',
                    type: 'desc'
                },
            ],
            // series数据
            data: [],
            // legend数据
            clientlabels: [],
            clientcounts: [],
            // echarts配置数据
            option: {
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(39,42,49,0.7)', //设置背景图片 rgba格式
                    borderColor: 'rgba(39,42,49,0.7)', //设置边框颜色
                    textStyle: {
                        color: "#fff" //设置文字颜色
                    },
                },

                // 图例自定义位置
                legend: {
                },

                series: [
                    {
                        type: 'pie',
                        radius: ['65%', '85%'],
                        center: ['25%', '43%'],//距离左右，上下距离的百分比
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'center',
                        },
                        labelLine: {
                            show: true
                        },
                        data: []
                    }
                ]
            }
        };
    },
    methods: {

        // 切换tabs
        swithTabs(item, index) {
            this.tabsInitNum = index
        },

        async initData() {
            let res = await new this.Request(this.Urls.m().workerAgeSummary, '').modepost();
            if (res.status == 200) {

                // series - data 赋值
                res.data.data.forEach(item => {
                    let dataItem = { name: '', value: '' }
                    dataItem.name = item.age_range
                    dataItem.value = item.rangeNum
                    this.data.push(dataItem)
                })
                this.option.series[0].data = this.data

                // legend - formatter动态赋值
                const optionData = this.data    // 赋值给常量 optionData
                const sumData = res.data.sum
                this.option.legend = {
                    orient: 'vertical', //垂直显示
                    top: '2%',
                    right: '10%',
                    textStyle: {
                        fontSize: 13,
                        color: '#fff'
                    },
                    icon: 'circle',
                    formatter(params) { // params 是模块的名字
                        // 这里的optionData就是外面的常量的值，我是拼了一个数组传进来的
                        //  然后这里根据模块名的值，也就是params的值，动态的拼成自己想要的显示样子
                        if (optionData.length) {
                            switch (params) {
                                case "0-18":
                                    return params + "岁      " + optionData[0].value
                                case "19-30":
                                    return params + "岁    " + optionData[1].value;
                                case "31-40":
                                    return params + "岁    " + optionData[2].value;
                                case "41-50":
                                    return params + "岁    " + optionData[3].value;
                                case "51-60":
                                    return params + "岁    " + optionData[4].value;
                                case "61-0":
                                    return params + "岁      " + optionData[5].value;
                                default:
                                    return "";
                            }
                        }
                    }
                }

                // series - label - normal 赋值
                this.option.series[0].label.normal = {
                    show: true,
                    position: 'center',
                    formatter: function () {
                        return sumData + '\r\n 总人数';
                    },
                    textStyle: {
                        fontSize: 17,
                        color: '#fff'
                    }
                }
            }
            this.initEcharts()
        },

        initEcharts() {
            this.chart = Echarts.init(this.$refs.chart);
            this.chart.setOption(this.option);
        },
    },

    mounted() {
        this.initData()
    }
};
</script>

<style scoped="scoped">
.left_box_1 {
    border: 1px solid #258add;
    background-color: rgb(13, 25, 45);
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
}
.top_box {
    position: absolute;
    left: 30px;
    top: -10px;
    color: #03fafb;
    font-size: 15px;
    text-shadow: 0 0 0.5rem #00d8ff;
}
.left_box {
    margin: 10px 0px 10px 30px;
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    /* background-color: rgb(32, 30, 25); */
}
.left_box_item {
    display: flex;
    align-items: center;
}
.left_box_item img {
    width: 35px;
    height: 35px;
}
.left_box_item_title {
    margin-left: 10px;
}
.left_box_item_title_num {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}
.left_box_item_title_txt {
    font-size: 13px;
    color: #9ca1aa;
}

.right_box {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    margin: 10px;
    background-color: rgb(13, 25, 45);
}
.right_box_tab {
    background-color: rgb(13, 25, 45);
    width: 100%;
    display: flex;
    justify-content: flex-end;
    font-size: 13px;
}
.right_box_tab div {
    padding: 5px 7px;
    cursor: pointer;
}
</style>
